<template>
  <view>
    <web-view
      v-if="path"
      :key="token"
      :webview-styles="webviewStyles"
      :src="path"
      @load="handleLoad"
      @error="handleError"
      @message="handleMessage"></web-view>
  </view>
</template>

<script>
import { getQueryParams } from '@/utils/tools.js';
import { fetchUrl } from '@/api/shop-activity.js';
// import storage from '@/utils/storage';
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      webviewStyles: {
        progress: {
          color: '#FF3333',
        },
      },
      path: '',
      // token: storage.token.get(),
      options: {},
      share: {},
    };
  },
  computed: {
    ...mapGetters(['token']),
  },
  /**
	 * @param {Object} options {title: '', path: '', scene: ''}， path值需要通过encodeURIComponent进行转码, scene为短链参数
	 */
  onLoad(options) {
    // 如果有这个参数表示是短链过来的，需要去获取完整的链接
    if (options.scene) {
      const scene = decodeURIComponent(options.scene);
      const obj = getQueryParams(scene);
      this.getParams(obj.value);
    } else {
      this.options = options;
      this.init();
    }
  },
  watch: {
    token() {
      this.init();
    },
  },
  onShareAppMessage() {
    return this.share;
  },
  methods: {
    init() {
      // const token = 'adb66ba9-07b3-4710-983c-9f62072be02e' || storage.token.get();
      // const token = storage.token.get();
      // console.log(token);
      // console.log(data);
      // const queryString = paramsToQueryStr(data);
      let path = decodeURIComponent(this.options.path);
      // 加入token
      if (this.token) {
        if (path.indexOf('?') !== -1) {
          path += `&token=${this.token}`;
        } else {
          path += `?token=${this.token}`;
        }
      }
      // 加上时间戳，去页面缓存
      this.path = `${path.replace(
        '#',
        `?cache=${new Date().getTime()}#`
      )}`;
      
      // console.log('跳转进入h5界面-------', queryString);
      console.log('跳转进入h5界面-------', this.path);
      // this.token = token;
      // 设置标题
      if (this.options.title) {
        uni.setNavigationBarTitle({
          title: this.options.title,
        });
      }
    },
    async getParams(key) {
      try {
        const reg = /\?.*?\#/g;
        const { data } = await fetchUrl(key);
        this.options = getQueryParams(data.replace(reg, '#'));
        this.init();
      } catch (error) {
        throw new Error(error);
      }
    },
    // 加载失败
    handleError() {
      uni.hideLoading();
      uni.showToast({
        title: '加载网页失败,请检查网络',
      });
    },
    // 加载成功
    handleLoad() {
      uni.hideLoading();
    },
    // 当网页向应用postMessage时
    handleMessage({ detail }) {
      const [data] = detail.data.slice(detail.data.length - 1);
      if (data) {
        // 如果是分享
        if (data.type === 'share') {
          const { shareLink, shareTitle, shareThumbnail, shareContent } = data.data;
          this.share = {
            path: `/pages/web-view/index?path=${encodeURIComponent(shareLink)}`,
            title: shareTitle,
            imageUrl: shareThumbnail,
            desc: shareContent,
          };
        }
      }
    },
  },
};
</script>

<style lang="scss">

</style>
